<template>
  <view class="login">
    <image :src="BaseURL + bg_picture" class="imgstyle">
      <view class="logo">
        <image :src="BaseURL + logo_picture" class="logo"></image>
      </view>
      <view class="content">
        <view class="title flexc">丰苗智慧后勤系统</view>
        <view class="form br10">
          <van-cell-group>
            <van-input
              v-model="form.schoolnumber"
              required
              clearable
              label="学校编号"
              left-icon="wap-home-o"
              placeholder="请输入学校编号"
              @blur="changeBlur"
            ></van-input>
            <van-input
              v-model="form.account"
              name="account"
              label="账号"
              left-icon="user-o"
              placeholder="请输入账号"
              :disabled="!flag"
            ></van-input>
            <van-input
              v-if="type == 'text'"
              v-model="form.password"
              :type="type"
              @click-icon.stop="changeType"
              name="password"
              label="密码"
              left-icon="clock-o"
              right-icon="eye-o"
              placeholder="请输入密码"
              required
              :disabled="!flag"
            ></van-input>

            <van-input
              v-else
              v-model="form.password"
              :type="type"
              @click-icon.stop="changeType"
              name="password"
              label="密码"
              left-icon="clock-o"
              right-icon="closed-eye"
              placeholder="请输入密码"
              required
              :disabled="!flag"
            ></van-input>

            <view class="imgcode">
              <view class="input">
                <van-input
                  v-model="form.code"
                  type="text"
                  name="code"
                  label="验证码"
                  left-icon="qr"
                  placeholder="验证码"
                  required
                  :disabled="!flag"
                ></van-input>
              </view>
              <view class="debug">
                <canvas
                  canvas-id="captchaCanvas"
                  style="margin-left: 0rpx; height: 90rpx; width: 230rpx"
                  @click="onCanvas"
                  class="mycanvas"
                ></canvas>
              </view>
            </view>

            <view class="btn_login mb20">
              <van-button
                block
                type="primary"
                color="#1769D9"
                size="large"
                class="btn_style"
                @click="submitData"
                >登录</van-button
              >
            </view>
          </van-cell-group>
        </view>
      </view>
    </image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      flag: false,
      type: "password",
      captchaText: "",
      canvasFlag: false, //判断图形验证码是否通过
      bg_picture:"", //背景图
      logo_picture: "", //logo
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad() {},
  methods: {
    /*图形验证码*/
    onCanvas() {
      const that = this;
      const ctx = wx.createCanvasContext("captchaCanvas");  //
      // 生成随机的验证码文字
      const captchaText = generateCaptchaText();
      // console.log(captchaText,'captchaText');
      const screenWidth = uni.getStorageSync("screenWidth");
      const unit = screenWidth / 750; // 设备宽度/375
      const width = 100 * unit;
      const height = 40 * unit;

      // 绘制背景
      ctx.setFillStyle("#f5f5f5");
      ctx.fillRect(0, 0, width, height);
      // 绘制文字
      ctx.setFontSize(30);
      ctx.setTextAlign("center");
      ctx.setTextBaseline("middle");
      ctx.setFillStyle("#333");
      ctx.fillText(captchaText, width, height);
      // 绘制干扰线
      for (let i = 0; i < 5; i++) {
        ctx.setStrokeStyle(getRandomColor());
        ctx.beginPath();
        ctx.moveTo(getRandomNumber(0, 100), getRandomNumber(0, 40));
        ctx.lineTo(getRandomNumber(0, 100), getRandomNumber(0, 40));
        ctx.stroke();
      }
      // 绘制干扰点
      for (let i = 0; i < 50; i++) {
        ctx.setFillStyle(getRandomColor());
        ctx.beginPath();
        ctx.arc(getRandomNumber(0, 100), getRandomNumber(0, 40),1,  0, 2 * Math.PI  );
        ctx.fill();
      }
      // 将绘制的内容渲染到canvas上
      ctx.draw();
      // 生成随机的验证码文字
      function generateCaptchaText() {
        const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
        let captchaText = "";
        for (let i = 0; i < 4; i++) {
          captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        that.captchaText = captchaText;
        return captchaText;
      }
      // 生成指定范围内的随机整数
      function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      // 生成随机颜色值
      function getRandomColor() {
        const letters = "012345";
      }
    },
    changeType() {
      this.type = this.type == "password" ? "text" : "password";
    },
    // 学校编号验证通过
    // 填写用户名、密码
    // 验证图形验证码
    // 登录跳转
    async changeBlur() {
      if (this.form.schoolnumber) {
        let res = await this.$ajax.getSchoolcode({
          schoolcode: this.form.schoolnumber,
        });

        if (res.code == 1) {
          this.getSchoolInfo(res.data); //学校信息存全局
          console.log(this.schoolInfo, "schoolInfo----");
          this.flag = true;
          // 编号通过
          // 校验用户名、密码
        } else {

          this.flag = false;
        }
        uni.showToast({
          icon: "none",
          title: res.msg,
          duration: 2000,
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "请输入学校编号",
          duration: 2000,
        });
      }
    },
    /*登录*/
    async submitData() {
      // 编号、账号、密码、验证码
      if (
        this.form.schoolnumber &&
        this.form.account &&
        this.form.password &&
        this.form.code
      ) {
        // 验证码 通过 验证账号密码
        // if (this.form.code === this.captchaText) { //比较大小写
          // 不比较大小写
        if (this.form.code.toLowerCase() === this.captchaText.toLowerCase()) {
          let res = await this.$ajax.getLogin({
            account: this.form.account,
            password: this.form.password,
          });
          if (res.code == 1) {
            // 登录成功
            this.getUserInfo(res.data.userinfo); // 用户信息
            uni.setStorageSync("token", res.data.userinfo.token);
            uni.setStorageSync("account", this.form.account);
            uni.setStorageSync("password", this.form.password);
            this.getAllPermissionAsync();
            uni.switchTab({
              url: "../home/home",
            });
          } else {
            res.msg &&
              uni.showToast({
                icon: "none",
                title: res.msg,
                duration: 2000,
              });
          }
        } else {
          this.onCanvas();
          uni.showToast({
            icon: "none",
            title: "验证码错误，请重新输入",
            duration: 1000,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "请填写对应信息",
          duration: 1000,
        });
      }

      // uni == wx;
    },

    async getAllPermissionAsync() {
      let res = await this.$ajax.getAllPermission();
      if (res.code == 1) {
        uni.setStorageSync("permission", res.data);
        this.getAllpermission(res.data);
      }
    },
    /*获取图片*/
    async getImage() {
      let res = await this.$ajax.getPicinfo();
      if (res.code == 1) {
        this.bg_picture = res.data.bg_picture; //背景图
        this.logo_picture = res.data.logo_picture; //logo
        console.log(this.bg_picture, this.logo_picture,'图片');
      } else {
        uni.showToast({
          icon: "none",
          title: res.msg,
          duration: 1000,
        });
     
      }
    },
  },

  mounted() {
    this.getImage();
    console.log(uni.getStorageSync("password"), uni.getStorageSync("account"));

    this.$set(this.form, "password", uni.getStorageSync("password"));
    this.$set(this.form, "account", uni.getStorageSync("account"));
    this.onCanvas();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>


<style lang="scss">
.debug {
  margin-left: 1rpx;
}
.imgcode {
  width: 100%;
  display: flex;
  height: 90rpx;
  overflow: hidden;
  .input {
    width: 50rpx;
    flex: 1;
  }
  .mycanvas {
  }
}
.van-cell {
  padding: 10rpx 10rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  border: 1rpx solid #c8c9cc;
}

.login {
  width: 100%;
  height: 100vh;
  position: absolute;
  .imgstyle {
    width: 100%;
    height: 100vh;
  }

  .logo {
    height: 100rpx;
    width: 140rpx;
    position: absolute;
    z-index: 10;
    top: 3%;
    left: 3%;
    transform: translate(-3%, -3%);
  }
  .content {
    position: absolute;
    z-index: 10;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    .title {
      font-family: SourceHanSansSC;
      font-weight: bolder;
      color: #ffffff;
      font-size: 45rpx;
      font-style: normal;
      text-decoration: none;
      line-height: 100rpx;
    }

    .form {
      background-color: white;
      margin: 37rpx 20rpx 0rpx 20rpx;
      padding: 20rpx;
      .label-class {
        width: 140rpx !important;
      }

      .btn_login {
        width: 100%;

        .btn_style {
          display: block;
          margin: 30rpx auto;
        }
      }
    }
  }
}
</style>

<style></style>
